<template>
	<view>
		<view v-for="(item, index) in datalist" :key="index" style="margin: 10rpx;">
			<cardviewtext
				:title="item.title"
				:isTop="item.isTop"
				:author="item.author"
				:comments="item.comments"
				:time="item.time"
				:images="item.imagelist"
				@click="onCustomViewClick()"
			>
				<template v-slot:tips>
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索：</text>
						<view class="borderbox"><text>今日金价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</cardviewtext>
		</view>
	</view>
</template>

<script>
	import cardviewtext from "../../components/cardviewtext.vue"
	export default {
		components: {
			cardviewtext
		},
		data() {
			return {
				datalist: [{
					nID: "T15627",
					title: "14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
					isTop: true, 
					author: "界面新闻",
					comments: 56,
					time: "2025.10.07",
					imagelist: ["/static/api.png"]
				}, {
					nID: "B4485",
					title: "把握历史大势 共创美好未来（观沧海）",
					isTop: false, 
					author: "人民日报",
					comments: 1025,
					time: "2025.10.25",
					imagelist: ["/static/xw1.jpg"]
				},
				{
					nID: "B4486",
					title: "黄金还能走多远？卖方高呼 “第三浪启动”，230 多份研报看多",
					isTop: false, 
					author: "财联社",
					comments: 452,
					time: "2025.10.08",
					showSearch: true,
					imagelist: ["/static/xw2.jpg"]
				},
				{
					nID: "B4487",
					title: "“没有短板” 的完美战鹰！歼 - 16 机库独家探访",
					isTop: false, 
					author: "红星新闻",
					comments: 56,
					time: "2025.10.07",
					imagelist: ["/static/xw3.png"]
				}, {
					nID: "B4488",
					title: "多国学者共探巴克特里亚考古 携手推进丝绸之路文明研究新进程",
					isTop: false, 
					author: "中国日报网",
					comments: 56,
					time: "2025.10.12",
					imagelist: ["/static/xw4.png"]
				}]
			}
		},
		methods: {
			onCustomViewClick() {
				console.log("卡片被点击了");
			}
		}
	}
</script>

<style>
	.slotcontent {
		margin: 10rpx 0;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.slotcontent text {
		color: blue;
		margin-right: 10rpx;
	}
	.borderbox {
		border: 1rpx solid gray;
		border-radius: 10rpx;
		margin: 0 8rpx;
		padding: 0 10rpx; 
	}
</style>